<style type="text/css">
    #e321 .exc {
        width: 637px;
    }
</style>

<div class="wrapper bgwhite" style="width: 980px; border-radius: 2px; position: relative;">
    <!--
    <div id="flags_sys" class="radius clearfix">

        <ul>

            <li><a href="<?=base_url($this->lang->switch_uri('me'));?>"><img src="<?=$url;?>assets/img/flags/me.png" alt="Crnogorski" title="Crnogorski" /></a></li>
            <li><a href="<?=base_url($this->lang->switch_uri('ru'));?>"><img src="<?=$url;?>assets/img/flags/ru.png" alt="Rусский" title="Rусский" /></a></li>
            <li><a href="<?=base_url($this->lang->switch_uri('en'));?>"><img src="<?=$url;?>assets/img/flags/en.png" alt="English" title="English" /></a></li>

        </ul>       

    </div>
        -->
    <div id="body" class="clearfix" style="padding-bottom: 90px;">

        <!--EXCURSIONS ONLINE BOOKING-->
        <div id="e321">
            <div class="excursions">

                <h1 class="franklin_gothic_metium_cond">Online Booking :: Excursions</h1>

                <br />

                <form action="<?=base_url('client/book_now')?>" method="post" name="customer" id="customer">

                    <input type="hidden" value="<?=$booking_info->excid?>" name="excid" />
                    <input type="hidden" value="<?=$booking_info->noadult?>" name="noadult" />
                    <input type="hidden" value="<?=$booking_info->noch?>" name="noch" />
                    <input type="hidden" value="<?=$booking_info->persons?>" name="persons" />
                    <input type="hidden" value="<?=$booking_info->adultprice?>" name="adultprice" />
                    <input type="hidden" value="<?=$booking_info->chprice?>" name="chprice" />
                    <input type="hidden" value="<?=$booking_info->totalprice?>" name="totalprice" />
                    <input type="hidden" value="<?=$booking_info->date?>" name="date" />
                    <input type="hidden" value="Localhost" name="s_b_i" />


                    <div class="box" style="background: none;box-shadow: none;height: 148px;padding: 8px 8px 8px 2px;width: 222px; border: 0;"><img alt="IT Montenengro" src="<?=base_url()?>assets/img/logo-customer.png" /></div>
                    <div class="exc">
                        <div class="top_spacer"></div>
                        <div class="top_border"></div>

                        <!--ATLAS-->
                        <div class="atlas_content_title">
                            <div class="atlas_content_title_inner">                

                                <div class="product_price" style="width:140px; color: #FFF; margin-top: 75px;">
                                    <span class="title">Current cart total</span>
                                    <span>EUR</span>      <br>
                                    <span class="price"><em>&euro; <?=$booking_info->totalprice?><span></span></em></span>
                                </div>

                                <div class="atlas_content_intro">
                                    <h1>Customer Information</h1>                                

                                    <div id="atlas_list">
                                        <ul>
                                            <li><span>Number of adults: <?=$booking_info->noadult?></span></li>
                                            <li><span>Number of Childres: <?=$booking_info->noch?></span></li>
                                            <li><span>Total price: EUR &euro; <?=$booking_info->totalprice?></span></li>
                                        </ul>
                                    </div>                     
                                </div>        

                                <br class="clearing" />

                            </div>
                        </div> 

                        <!--CHECK OUT CUSTOMER-->

                        <!--CHECK OUT CUSTOMER-->
                        <div class="check_out">

                            <? if(isset($booking_msg)): ?>
                                <br />
                                <div class="error" style="margin-left:10px;margin-right:10px;">
                                    <p style="padding: 10px; line-height: 19px;"><?=$booking_msg?></p>
                                </div>

                                <? endif; ?>

                            <!--TRAVELER DETAILS-->
                            <div class="traveler_details">
                                <h2>Traveler details</h2>
                                <div id="infomessage" style="display: none;"></div>
                                <p class="label_header">                           
                                    <label class="traveler_title" for="traveler_title">Title</label>
                                    <label class="traveler_firstname" for="traveler_firstname">First Name</label>
                                    <label class="traveler_lastname" for="traveler_lastname">Last Name</label>
                                </p>
                                <div class="traveler_list">
                                    <!-- do adults first -->                              
                                    <? for ($i=1; $i<=$booking_info->noadult; $i++){?>                   
                                        <p class="alt" <? if ($i==1)echo 'style="border-top:1px dotted #f5c79f;"'?>>  <!--STYLE FIX :)-->
                                            <span class="traveler_index">
                                                <label class="required" for="traveler_firstname<?=$i;?>>" style="<? if($i!=1)echo 'background:none'; ?>">
                                                    <em>*</em> Traveler <?=$i;?> (Adult)
                                                </label>                                        
                                            </span>
                                            <select name="a_title[]" id="a_title<?=$i;?>" class="traveler_title">                                    
                                                <option value="Mr">Mr</option>                                   
                                                <option value="Mrs">Mrs</option>                           
                                                <option value="Ms">Ms</option>                              
                                                <option value="Miss">Miss</option>                                
                                                <option value="Mstr">Mstr</option>                            
                                            </select>
                                            <input type="text"  name="a_firstName[]" maxlength="30" class="traveler_firstname iconname" id="a_firstName<?=$i;?>" value="" />
                                            <input type="text"  name="a_lastName[]" maxlength="30" class="traveler_firstname pad_text_left" id="a_lastName<?=$i;?>" value="" />
                                        </p>
                                        <?}?>
                                    <!-- do child second -->
                                    <? for ($j=1; $j<=$booking_info->noch; $j++){?>
                                        <p class="alt">
                                            <span class="traveler_index">
                                                <label class="required" for="traveler_firstname<?=$i;?>>" style="background: none;">
                                                    <em>*</em> Traveler <?=$i+$j;?> (Child)
                                                </label>                                        
                                            </span>
                                            <select name="c_title[]" id="c_title<?=$i;?>" class="traveler_title">                                    
                                                <option value="Mr">Mr</option>                                   
                                                <option value="Mrs">Mrs</option>                           
                                                <option value="Ms">Ms</option>                              
                                                <option value="Miss">Miss</option>                                
                                                <option value="Mstr">Mstr</option>                            
                                            </select>
                                            <input type="text"  name="c_firstName[]" maxlength="30" class="traveler_firstname" id="c_firstName<?=$i;?>" value="" style="width: 185px;" />
                                            <input type="text"  name="c_lastName[]" maxlength="30" class="traveler_firstname pad_text_left" id="c_lastName<?=$i;?>" value="" />
                                        </p>
                                        <?}?>        
                                </div><!-- end of traveler_list -->
                            </div><!-- end of traveler_details -->

                            <!--CONTACT DETAILS-->
                            <div class="contact_details">
                                <h2>Contact details</h2>
                                <p style="margin-top: 5px;">
                                    <label class="email_address required" for="email_address"><em>*</em> Email</label>
                                    <input type="text" value="" name="email" class="email_address iconemail" id="email_address" style="width: 189px;">
                                    <label class="verify_email_address required " for="verify_email_address"><em>*</em> Verify email</label>
                                    <input type="text" value="" name="email1" class="verify_email_address pad_text_left" id="verify_email_address" style="width: 188px;">
                                </p>

                                <!--NOTE BOX-->
                                <div class="note_box">
                                    <div class="note_body">

                                        <div class="right_note">
                                            <ul>
                                                <li style="color: #848484;">
                                                    We will never sell, share or distribute your personal information.
                                                </li>
                                            </ul>
                                        </div>
                                        <div class="left_note">
                                            <strong class="note_title">Please note</strong>
                                        </div>
                                        <br class="clearing" /> 
                                    </div>
                                </div>

                            </div>

                            <!--BOOK NOW-->
                            <div style="float: right; margin: 20px 0 0 0">
                                <div class="atlas_btn_big" style="margin-right:0;">

                                    <input type="submit" value="Book Now" id="book_now">

                                </div>

                            </div>

                            <br class="clearing" /> 

                        </div>

                    </div>

                    <br class="clearing">

                </form>

            </div>

        </div>

    </div>
</div>

<script type="text/javascript">

    /***********************************************************
    * CUSTOMER BOOKING - EXCURSION BOOKING
    ***********************************************************/

    $('#customer').live('submit',function(){ 

            // Override default error message
            jQuery.validator.messages.required = "";

            // Override generation of error label 
            $("#customer").validate({
                    rules: {
                        "a_firstName[]": "required",
                        email: {
                            required: true, 
                            email: true 
                        },
                        email1: {
                            required: true,
                            equalTo: "#email_address"
                        }
                    },
                    errorPlacement: function(error, element){}
            });

            var is_valid_form = $("#customer").valid();
            if(is_valid_form==false) return false;

    })
</script>